import { Component } from '@angular/core';
import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-product-edit-dialog',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ButtonModule,
    InputTextModule
  ],
  template: `
    <div class="p-fluid">
      <div class="p-field">
        <label for="productName">产品名称</label>
        <input id="productName" type="text" pInputText [(ngModel)]="product.productName">
      </div>
      <div class="p-field">
        <label for="productCode">产品编码</label>
        <input id="productCode" type="text" pInputText [(ngModel)]="product.productCode">
      </div>
      <div class="p-field">
        <label for="productType">产品类型</label>
        <input id="productType" type="text" pInputText [(ngModel)]="product.productType">
      </div>
      <div class="p-field">
        <label for="model">型号</label>
        <input id="model" type="text" pInputText [(ngModel)]="product.model">
      </div>
      <div class="p-field">
        <label for="unit">单位</label>
        <input id="unit" type="text" pInputText [(ngModel)]="product.unit">
      </div>
      <div class="p-dialog-footer">
        <button pButton type="button" label="保存" (click)="save()"></button>
        <button pButton type="button" label="取消" (click)="close()" class="p-button-secondary"></button>
      </div>
    </div>
  `,
  styleUrls: ['./product-edit-dialog.component.scss']
})
export class ProductEditDialogComponent {
  product: any = {};

  constructor(
    public ref: DynamicDialogRef,
    public config: DynamicDialogConfig
  ) {
    if (this.config.data) {
      this.product = { ...this.config.data };
    }
  }

  save() {
    this.ref.close(this.product);
  }

  close() {
    this.ref.close();
  }
}